<template>
	<div id="index">
		<dv-full-screen-container class="bg">
			<dv-loading v-if="loading">Loading...</dv-loading>
			<div v-else class="host-body">
				<div class="d-flex jc-center">
					<dv-decoration-10 style="width:33.3%;height:.0625rem;" />
					<div class="d-flex jc-center">
						<dv-decoration-8 :color="['#568aea', '#000000']" style="width:2.5rem;height:.625rem;" />
						<div class="title">
							<span class="title-text fw-b">大数据可视化大屏</span>
							<dv-decoration-6 class="title-bototm" :reverse="true" :color="['#50e3c2', '#67a1e5']" style="width:3.125rem;height:.1rem;" />
						</div>
						<dv-decoration-8 :reverse="true" :color="['#568aea', '#000000']" style="width:2.5rem;height:.625rem;" />
					</div>
					<dv-decoration-10 style="width:33.3%;height:.0625rem; transform: rotateY(180deg);" />
				</div>

				<!-- 第二行 -->
				<div class="d-flex jc-between px-2">
					<div class="d-flex" style="width: 40%">
						<div class="react-right ml-4" style="width: 6.25rem; text-align: left;background-color: #0f1325;">
							<span class="react-before"></span>
							<span class="text ">国外数据</span>
						</div>
						<div class="react-right  ml-3" style="background-color: #0f1325;">
							<span class="text fw-b">全国数据</span>
						</div>
					</div>
					<div style="width: 40%" class="d-flex">
						<div class="react-left bg-color-blue mr-3">
							<span class="text fw-b">省市数据分析</span>
						</div>
						<div class="react-left mr-4" style="width: 6.25rem; background-color: #0f1325; text-align: right;">
							<span class="react-after"></span>
							<span class="text">数据更新时间：{{nowTime}}</span>
						</div>
					</div>
				</div>

				<div class="body-box">
					<!-- 第三行数据 -->
					<div class="content-box">
						<div>
							<dv-border-box-12>
								<centerLeft1 />
							</dv-border-box-12>
						</div>
						<div>
							<dv-border-box-12>
								<centerLeft2 />
							</dv-border-box-12>
						</div>
						<!-- 中间 -->
						<div>
							<center />
						</div>
						<!-- 中间 -->
						<div>
							<centerRight2 />
						</div>
						<div>
							<dv-border-box-13>
								<centerRight1 />
							</dv-border-box-13>
						</div>
					</div>

					<!-- 第四行数据 -->
					<div class="bototm-box">
						<dv-border-box-13>
							<bottomLeft />
						</dv-border-box-13>
						<dv-border-box-12>
							<bottomRight />
						</dv-border-box-12>
					</div>
				</div>
			</div>
		</dv-full-screen-container>
	</div>
</template>

<script>
	import centerLeft1 from "./centerLeft1.vue";
	import centerLeft2 from "./centerLeft2.vue";
	import centerRight1 from "./centerRight1.vue";
	import centerRight2 from "./centerRight2.vue";
	import center from "./center.vue";
	import bottomLeft from "./bottomLeft";
	import bottomRight from "./bottomRight";
	import { getListAPI } from '../../apis/api.js';

	export default {
		data() {
			return {
				loading: true,
				nowTime: '' ,// 当前时间,
				timer : null
			};
		},
		components: {
			centerLeft1,
			centerLeft2,
			centerRight1,
			centerRight2,
			center,
			bottomLeft,
			bottomRight
		},
		mounted() {
			this.cancelLoading();
			this.fetchList();
		},

		methods: {
			cancelLoading() {
				setTimeout(() => {
					this.loading = false;
				}, 2000);
			},

			// 调用接口获取数据
			fetchList() {
				getListAPI().then(res => {
					if(res != undefined)
					{
						if( res.data.code == '200' ){
							this.nowTime = res.data.data;
							console.log(res.data);
						}else{
							clearInterval(this.timer);
						}
					}else{
						alert(res);
						clearInterval(this.timer);
					}
				});
				// this.timer = setInterval(this.fetchList, 10000);
			}
		}
	};
</script>

<style lang="scss">
	@import "../../assets/scss/epidemic-screen.scss";
</style>
